import { useState, useEffect, useRef, LegacyRef } from 'react';
import { Map, Marker, CustomOverlay, ScaleControl, ZoomControl } from 'react-bmapgl';
import { StatisticCard } from '@ant-design/pro-card';
import RcResizeObserver from 'rc-resize-observer';
import { request } from 'umi';
import { api } from '@/global';
import whiteStyle from '../../../public/custom_map_config.json';
import { EllipsisOutlined } from '@ant-design/icons';
import { TinyArea } from '@ant-design/plots';

import { Line } from '@ant-design/charts';
import { Rose } from '@ant-design/plots';
import { Pie } from '@ant-design/plots';
import { json } from 'express';
const imgStyle = {
  display: 'block',
  width: 60,
  height: 60,
};








const animation = {
  // 配置图表第一次加载时的入场动画
  appear: {
    animation: 'wave-in', // 动画效果
    duration: 5000, // 动画执行时间
  },
  enter: {
    animation: 'wave-in', // 动画效果
    duration: 5000, // 动画执行时间
  }
};

type resultType = {
  createTime: string;
  deptId: number;
  id: string;
  storageAddress: string;
  storageLatitude: string;
  storageLongitude: string;
  storageName: string;
};

const CircleInfo = (props: any) => {
  return (
    <div
      style={{
        height: 60,
        width: 60,
        backgroundColor: '#a4c9cc',
        borderRadius: '50%',
        opacity: '60%',
        borderStyle: 'solid',
        borderColor: '#509296',
        textAlign: 'center',
        fontSize: 10,
      }}
    >
      <div
        style={{ height: '100%', width: '100%', textAlign: 'center', fontSize: 8, marginTop: 12 }}
      >
        {props.name}
      </div>
    </div>
  );
};



type fileIncreamentType = {
  month: string;
  value: number;
};
type fileStoreNumberType = {
  type: string;
  value: number;
};

type messageType = {
  fileNumber: number;
  onlineFileNumber: number;
  offlineFileNumber: number;
  fileUploadNumber: number;
  fileDownloadNumber: number;
  fileIncrementList: fileIncreamentType[];
  fileStoreNumberList: fileStoreNumberType[];
  fileStreamValues: string[];
};

export default () => {
  const [responsive, setResponsive] = useState(false);
  const [resultList, SetResultList] = useState<resultType[]>();
  const [lng, SetLng] = useState<number>();
  const [lat, SetLat] = useState<number>();
  const mapRef = useRef<LegacyRef<any>>();
  const [message, SetMessage] = useState<messageType>();
  const [dada, SetData] = useState([]);
  const [tinyArea, SetTinyArea] = useState([]);
  const [pieData, SetPieData] = useState([])
  const [roseData, SetRoseData] = useState([])
  // 地图
  const getDate = async () => {
    const result = await request(api.getStorageListByIds, {
      params: {
        ids: '[]',
      },
    });
    SetResultList(result.data);
  };

  const asyncFetch = () => {
    request(api.getFileMessage).then((result) => {
      SetData(result.data.fileIncrementList);

      const tinydata = result.data.fileStreamValues.map((item: string) => parseFloat(item))
      console.log(tinydata.length);

      SetPieData(result.data.fileTypeNumberList)
      SetTinyArea(tinydata);
      SetRoseData(result.data.fileStoreNumberList)
    });
  };

  const initPage = async () => {
    const resp = await request(api.getFileMessage);
    SetMessage(resp.data);
  };
  useEffect(() => {
    initPage();
    asyncFetch();
    const myGeo = new window.BMapGL.Geocoder();

    myGeo.getPoint(
      '山西工程技术学院',
      (point) => {
        if (point) {
          SetLng(point.lng);
          SetLat(point.lat);
        }
      },
      '阳泉',
    );
    getDate();
  }, []);

  const TinyAreaConfig = {
    height: 60,
    autoFit: false,
    data: tinyArea,
    smooth: true,
    color: '#E5EDFE',
    pattern: {
      type: 'line',
      cfg: {
        stroke: '#5B8FF9',
      },
    },
  };

  const config = {
    data: dada,
    height: 200,
    xField: 'month',
    smooth: true,
    yField: 'value',
    point: {
      size: 5,
      shape: 'diamond',
    },
  };

  const pieConfig = {
    appendPadding: 10,
    data: roseData,
    angleField: 'value',
    colorField: 'type',
    radius: 1,
    height: 200,
    innerRadius: 0.6,
    label: {
      type: 'inner',
      offset: '-50%',
      content: '{value}',
      style: {
        textAlign: 'center',
        fontSize: 14,
      },
    },
    interactions: [
      {
        type: 'element-selected',
      },
      {
        type: 'element-active',
      },
    ],
    statistic: {
      title: false,
      content: {
        style: {
          whiteSpace: 'pre-wrap',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
        },
        content: '存储室',
      },
    },
  };

  const roseConfig = {
    data: pieData,
    xField: 'type',
    yField: 'value',
    height: 200,
    seriesField: 'type',
    radius: 0.9,
    legend: {
      position: 'bottom',
    },
    label: {
      offset: -15,
    },
    interactions: [
      {
        type: 'element-active',
      },
    ],
  };


  return (
    <RcResizeObserver.Collection>
      <RcResizeObserver
        key="resize-observer"
        onResize={(offset) => {
          setResponsive(offset.width < 596);
        }}
      >
        <StatisticCard.Group
          direction={responsive ? 'column' : 'row'}
          gutter={[8, 8]}
          style={{ backgroundColor: '#f0f2f5' }}
        >
          <StatisticCard

            bordered
            statistic={{
              title: '文件数量',
              value: message?.fileNumber,
              icon: (
                <img
                  style={imgStyle}
                  src="https://sxit-gc.oss-cn-beijing.aliyuncs.com/tdf-bms-file/icon/%E6%96%87%E4%BB%B6%E5%A4%B9.svg"
                  alt="icon"
                />
              ),
            }}
          />
          <StatisticCard
            bordered
            statistic={{
              title: '线上文件数',
              value: message?.onlineFileNumber,
              icon: (
                <img
                  style={imgStyle}
                  src="https://sxit-gc.oss-cn-beijing.aliyuncs.com/tdf-bms-file/icon/%E5%9F%B9%E8%AE%AD%E8%AF%BE%E7%A8%8B.svg"
                  alt="icon"
                />
              ),
            }}
          />
          <StatisticCard
            bordered
            statistic={{
              title: '线下文件数',
              value: message?.offlineFileNumber,
              icon: (
                <img
                  style={imgStyle}
                  src="https://sxit-gc.oss-cn-beijing.aliyuncs.com/tdf-bms-file/icon/%E6%96%87%E4%BB%B6%E5%A4%B9%E6%96%87%E4%BB%B6.svg"
                  alt="icon"
                />
              ),
            }}
          />
          <StatisticCard
            bordered
            statistic={{
              title: '文件上传次数',
              value: message?.fileUploadNumber,
              icon: (
                <img
                  style={imgStyle}
                  src="https://sxit-gc.oss-cn-beijing.aliyuncs.com/tdf-bms-file/icon/%E4%B8%8A%E4%BC%A0.svg"
                  alt="icon"
                />
              ),
            }}
          />
          <StatisticCard
            bordered
            statistic={{
              title: '文件下载次数',
              value: message?.fileDownloadNumber,
              icon: (
                <img
                  style={imgStyle}
                  src="https://sxit-gc.oss-cn-beijing.aliyuncs.com/tdf-bms-file/icon/%E4%B8%8B%E8%BD%BD-1.svg"
                  alt="icon"
                />
              ),
            }}
          />
        </StatisticCard.Group>
        <StatisticCard.Group direction={responsive ? 'column' : 'row'} style={{ marginTop: 8, backgroundColor: '#f0f2f5' }} gutter={[8, 8]}>
          <StatisticCard
            title="各月文件存储量走线"
            tooltip="月份"
            bordered
            extra={<EllipsisOutlined />}
            chart={<Line {...config} animation={animation}></Line>}
          />
          <StatisticCard
            title="文件类型"
            bordered
            extra={<EllipsisOutlined />}
            chart={<Rose {...roseConfig} animation={animation} />}
          />
          <StatisticCard
            title="存储室文件分布"
            bordered
            extra={<EllipsisOutlined />}
            chart={<Pie {...pieConfig} animation={animation} />}
          />
        </StatisticCard.Group>
        <StatisticCard.Group>
          <StatisticCard title="外网流出流量" tooltip="单位kb">
            <TinyArea {...TinyAreaConfig} animation={animation} />
          </StatisticCard>
        </StatisticCard.Group>
        <StatisticCard.Group
          bordered
          style={{ height: 300, marginTop: 8, backgroundColor: '#f0f2f5', marginBottom: 80 }}
          gutter={[8, 8]}
        >
          <StatisticCard title="文件地标">
            <Map
              ref={mapRef}
              center={new BMapGL.Point(lng, lat)}
              zoom={18}
              mapStyleV2={{ styleJson: whiteStyle }}
              tilt={12}
            >
              <ScaleControl />

              <ZoomControl />

              {resultList &&
                resultList.map((item) => {
                  return (
                    <CustomOverlay
                      key={item.id}
                      position={new BMapGL.Point(item.storageLongitude, item.storageLatitude)}
                    >
                      <CircleInfo name={item.storageName} />
                    </CustomOverlay>
                  );
                })}
            </Map>
          </StatisticCard>
        </StatisticCard.Group>
      </RcResizeObserver>
    </RcResizeObserver.Collection>
  );
};
